<template>
	<view>
		<u-form :model="form" ref="uform" :rules="rules" label-width="240rpx" :error-type="errorType">
		  <u-form-item :label="item.title" prop="value" :required="item.must">
			  <u-input v-model="form.value" disabled :placeholder="item.msg" @click="show = true"/>
		  </u-form-item>
			<u-select
			  :mask-close-able="true"
			  v-model="show"
			  :placeholder="item.msg"
			  :list="item.selectData"
			  size="mini"
			  @confirm="getVal"
			>
			</u-select>
		</u-form>
	</view>
</template>

<script>
export default {
  props: ["item", "number"],
  data() {
    return {
	  errorType: ['message'],
	  show: false,
      form: {
        value: "",
      },
      rules: {
        value: [
          { required: this.item.must, message: this.item.msg, trigger: "change" },
        ],
      },
    };
  },
  methods: {
	  getVal(e) {
		  this.form.value = e[0].label
			this.$emit("changeComponent", {
			  number: this.number,
			  type: this.item.type,
			  value: e[0].value,
			});
		}
  },
  mounted() {
  		this.$refs.uform.setRules(this.rules);
		this.form = {
		  ...this.form,
		  ...this.item,
		};
		this.form.selectData.map((val) => {
			if (val.value === this.form.value) {
				this.form.value = val.label
			}
		})
  	}
};
</script>

<style>
</style>
